<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>佛学术语词典 H5</title>
<style>
  body {
    font-family: "Microsoft YaHei", "楷体", sans-serif;
    margin: 0;
    padding: 20px;
    background: #f7f7f7;
  }

  h2 {
    text-align: center;
    margin-bottom: 20px;
  }

  .container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
  }

  .term {
    background: #e6f0ff;
    border: 1px solid #99bbff;
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 16px;
    transition: 0.2s;
    flex-shrink: 0;
  }

  .term:hover {
    background: #d8e8ff;
  }

  /* 弹窗 */
  .modal {
    display: none;
    position: fixed;
    top:0; left:0; width:100%; height:100%;
    background: rgba(0,0,0,0.5);
    justify-content: center;
    align-items: center;
    z-index: 999;
  }

  .modal-content {
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    text-align: left;
    white-space: normal;
    line-height: 1.6;
    color: #006400;  /* 墨绿色 */
    word-break: break-word;
  }

  .close-btn {
    margin-top: 10px;
    text-align: right;
    color: #1a73e8;
    cursor: pointer;
  }

  @media(max-width:480px){
    .term { font-size: 14px; padding: 6px 10px; }
  }
</style>
</head>
<body>
<h2>佛学术语点击释义</h2>

<div class="container">
  <!-- 使用 data- 属性保存术语和释义 -->
    <span class="term" data-term="老死" data-def="种种众生的老、老衰、齿落、发白、皮皱、寿命的衰退…">老死</span>

    <span class="term" data-term="老死" data-def="种种众生的老、老衰、齿落、发白、皮皱、寿命的衰退、诸根的退化，这被称为老；在种种众生类中，种种众生的过世、灭亡、崩解、消失、死亡、寿终、诸蕴的崩解、尸体的舍弃，这被称为死。">老死</span>
    <span class="term" data-term="生" data-def="种种众生的生、出生、入（胎）、生起、再生、诸蕴显现、得诸处。">生</span>
    <span class="term" data-term="有" data-def="欲有、色有、无色有">有</span>
    <span class="term" data-term="取" data-def="欲取、见取、戒禁取、（真）我论取">取</span>
    <span class="term"  data-term="渴爱" data-def="对色的渴爱、对声的渴爱、对气味的渴爱、对味道的渴爱、对所触的渴爱、对法的渴爱">渴爱</span>
    <span class="term"  data-term="受" data-def="触所生受、耳触所生受、鼻触所生受、舌触所生受、身触所生受、意触所生受">受</span>
    <span class="term"  data-term="'触" data-def="眼触、耳触、鼻触、舌触、身触、意触">触</span>
    <span class="term"  data-term="六处" data-def="眼处、耳处、鼻处、舌处、身处、意处">六处</span>
	<span class="term"  data-term="名色" data-def="受、想、思、触、作意，这被称为名；四大与四大之所造色，这被称为色">名色</span>
    <span class="term" data-term="识" data-def="眼识、耳识、鼻识、舌识、身识、意识">识</span>
    <span class="term"  data-term="行" data-def="身行、语行、心行">行</span>
    <span class="term"  data-term="无明" data-def="不知苦、不知苦集、不知苦灭、不知导向苦灭道迹">无明</span>

	<span class="term"  data-term="四种食" data-def="或粗或细的物质食物，第二、触，第三、意思，第四、识。（为了已生成众生的存续，或为了求出生者的资助）">四种食</span>
    <span class="term"  data-term="正见" data-def="但对攀住、执取、心的依处、执持、烦恼潜在趋势不攀取、不紧握，不固持‘我的真我’的人，对‘所生起的只是苦的生起；所灭去的只是苦的灭去。’（一事），不困惑、不怀疑，不依于他人而智慧在这里生成.这个情形是正见">正见</span>
    <span class="term"  data-term="缘起" data-def="比丘们！以生为缘而有老死’：不论诸如来出现，或诸如来不出现，那个界住立、法安住性、法决定性、特定条件性。如来现正觉此，现观此；现正觉、现观后，告知、教导、安立、建立、开显、解析、阐明，而说：‘比丘们！你们看！以生为缘而有老死。’ 　　‘比丘们！以有为缘而有生’……（中略）‘比丘们！以取为缘而有有’……‘比丘们！以渴爱为缘而有取’……‘比丘们！以受为缘而有渴爱’……‘比丘们！以触为缘而有受’……‘比丘们！以六处为缘而有触’……‘比丘们！以名色为缘而有六处’……‘比丘们！以识为缘而有名色’……‘比丘们！以行为缘而有识’……‘比丘们！以无明为缘而有行’：不论诸如来出现，或诸如来不出现，那个界住立、法安住性、法决定性、特定条件性。如来现正觉此，现观此；现正觉、现观后，告知、教导、安立、建立、开显、解析、阐明，而说：‘你们看！比丘们！以无明为缘而有行。">缘起</span>
    <span class="term"  data-term="缘所生法" data-def="老死是无常的、有为的、缘所生的，是灭尽法、消散法、褪去法、灭法。 生（中略）有（中略）取（中略）比丘们！渴爱……比丘们！受……比丘们！触……比丘们！六处……比丘们！名色……比丘们！识……比丘们！行……比丘们！无明是无常的、有为的、缘所生的，是灭尽法、消散法、褪去法、灭法。">缘所生法</span>

    <span class="term"  data-term="四十四智" data-def="老死智、老死集智、老死灭智、导向老死灭道迹智，生智、生集智、生灭智、导向生灭道迹智，有智、有集智、有灭智、导向有灭道迹智，取智、取集智、取灭智、导向取灭道迹智，渴爱智、渴爱集智、渴爱灭智、导向渴爱灭道迹智，受智、受集智、受灭智、导向受灭道迹智，触智……（中略）六处智……名色智……识智……行智、行集智、行灭智、导向行灭道迹智。比丘们！这些被称为四十四智之事。">四十四智</span>
    <span class="term"  data-term="种种界" data-def="眼界、色界、眼识界，耳界、声界、耳识界，鼻界、气味界、鼻识界，舌界、味道界、舌识界，身界、所触界、身识界，意界、法界、意识界。比丘们！这被称为种种界。">种种界</span>
    <span class="term"  data-term="七界" data-def="光界、净界、虚空无边处界、识无边处界、无所有处界、非想非非想处界、想受灭界">七界</span>
    <span class="term"  data-term="四界" data-def="地界、水界、火界、风界">四界</span>

    <span class="term"  data-term="独住者" data-def="征服一切后，已知一切的善慧者， 在一切法上不染着， 舍断一切，在渴爱的灭尽上解脱">独住者</span>
    <span class="term"  data-term="一切" data-def="眼、色、耳、声、鼻、气味、舌、味道、身、所触、意、法。  比丘们！凡如果这么说：‘拒绝这个一切后，我要安立另一个一切。’那只是他的无根据之语，一被询问就不可能回答，且更会遭到恼害，那是什么原因呢？比丘们！那样，它不在（感官的）境域中。">一切</span>
    <span class="term"  data-term="世间" data-def="比丘！‘破散’，因此被称为‘世间’。比丘！眼为破散，色为破散，眼识为破散，眼触为破散，凡以这眼触为缘生起的或乐、或苦、或不苦不乐受也都为破散。     ……（中略）舌为破散，……（中略）意为破散，法为破散，意识为破散，意触为破散，凡以这意触为缘生起的或乐、或苦、或不苦不乐受也都为破散。">世间</span>
    <span class="term"  data-term="世间是空" data-def="因为以我或我所是空，因此被称为‘世间是空’。">世间是空</span>

    <span class="term"  data-term="世间的集起" data-def="	缘于眼与色而生起眼识，三者的会合而有触，以触为缘而有受，以受为缘而有渴爱，以渴爱为缘而有取，以取为缘而有有，以有为缘而有生，以生为缘而有老、死、愁、悲、苦、忧、绝望生起，比丘们！这是世间的集起。……（中略）">世间的集起</span>
    <span class="term"  data-term="旧业" data-def="应该被看作被造作的、被思惟的、能被感受的……（中略）舌是旧业，……（中略）意是旧业，应该被看作被造作的、被思惟的、能被感受的。">旧业</span>

<span class="term"  data-term="新业" data-def="现在以身、语、意做业">新业	</span>

<span class="term"  data-term="业灭" data-def="经由身业、语业、意业的灭而触达解脱">业灭</span>
<span class="term"  data-term="正念" data-def="比丘们！这里，比丘住于在身上随观身，热心、正知、有念，能调伏对于世间的贪与忧；住于在受上随观受……（中略）住于在心上随观心……（中略）住于法上随观法，热心、正知、有念，能调伏对于世间的贪与忧，比丘们！这样，比丘有正念">正念	</span>
<span class="term"  data-term="正知" data-def="比丘在前进、后退时是正知于行为者；在前视、后视时是正知于行为者；在（肢体）曲伸时是正知于行为者；在（穿）衣、持钵与大衣时是正知于行为者；在饮、食、嚼、尝时是正知于行为者；在大小便动作时是正知于行为者；在行、住、坐、卧、清醒、语、默时是正知于行为者，比丘们！这样，比丘有正知。">正知</span>
<span class="term"  data-term="二受" data-def="身的与心的">二受</span>
<span class="term"  data-term="三受" data-def="乐受、苦受、不苦不乐受">三受	</span>
<span class="term"  data-term="五受" data-def="乐根、苦根、喜悦根、忧根、平静根">五受</span>
<span class="term"  data-term="六受" data-def="	眼触所生受，……（中略）意触所生受。">六受</span>
<span class="term"  data-term="十八受" data-def="六喜悦近伺察、六忧近伺察、六平静近伺察">十八受	</span>
<span class="term"  data-term="三十六受" data-def="六依存于家的喜悦、六依存出离的喜悦、六依存于家的忧、六依存出离的忧、六依存于家的平静、六依存出离的平静。">三十六受</span>
<span class="term"  data-term="一百零八受" data-def="过去的三十六受、未来的三十六受、现在的三十六受。">一百零八受</span>
<span class="term"  data-term="三种行" data-def="身行、语行、心行。”  “屋主！入息出息是身行，寻伺是语行，想与受是心行。” “入息出息是身体的，这些法被身体所限制，入息出息是身行。先寻、伺，后迸出言语，因此，寻伺是语行。想与受是属于心的，这些法被心所限制，因此，想与受是心行。” ">三种行	</span>

<span class="term"  data-term="无量心解脱" data-def="比丘以与慈俱行之心遍满一方后而住，像这样第二方，……、到处，对一切如对自己，以与慈俱行之心，以广大、以出众、以无量、以无怨恨、以无恶意之心遍满全部世间后而住。以与悲俱行之心……（中略）以与喜悦俱行之心……（中略）以与平静俱行之心遍满一方后而住，像这样第二方，……到处，对一切如对自己，以与平静俱行之心，以广大、以出众、以无量、以无怨恨、以无恶意之心遍满全部世间后而住。  大德！这被称为无量心解脱">无量心解脱</span>
<span class="term"  data-term="无所有心解脱" data-def="比丘超越一切识无边处后（而知）：‘什么都没有’，进入后住于无所有处，大德！这被称为无所有心解脱。">无所有心解脱</span>
<span class="term"  data-term="空心解脱" data-def="比丘到林野，或树下，或空屋，像这样深虑：‘这我或我所是空的。’这被称为空心解脱。">空心解脱</span>
<span class="term"  data-term="无相心解脱" data-def="丘以一切相的不作意，进入后住于无相心三昧，大德！这被称为无相心解脱">无相心解脱</span>
<span class="term"  data-term="无为" data-def="凡贪的灭尽、瞋的灭尽、痴的灭尽，比丘们！这被称为无为">无为</span>
<span class="term" data-term="正见" data-def="苦之智，苦集之智，苦灭之智，导向苦灭道迹之智。">正见</span>
<span class="term"  data-term="正志" data-def="离欲的意向、无恶意的意向、无加害的意向。">正志</span>
<span class="term"  data-term="正语" data-def="戒绝妄语、戒绝离间语、戒绝粗恶语、戒绝杂秽语。 ">正语</span>

<span class="term"  data-term="正业" data-def="戒绝杀生、戒绝未给予而取、戒绝非梵行。">正业</span>
<span class="term"  data-term="正业" data-def="心圣弟子舍断邪命后，以正命营生。 ">正命</span>
<span class="term"  data-term="正精进" data-def="为了未生起的恶不善法之不生起而生欲、努力、生起活力、发心、勤奋；……（中略）为了已生起的善法之存续、不消失、增加、扩大、圆满修习而生欲、努力、生起活力、发心、勤奋。 ">正精进</span>
<span class="term"  data-term="正念" data-def="showDefinition(住于在身上随观身，热心、正知、有念，能调伏对于世间的贪与忧；住于在受上随观受，热心、正知、有念，能调伏对于世间的贪与忧；住于在心上随观心，热心、正知、有念，能调伏对于世间的贪与忧；住于在法上随观法，热心、正知、有念，能调伏对于世间的贪与忧。  ">正念</span>

  </div>


<!-- 弹窗 -->
<div class="modal" id="modal">
  <div class="modal-content">
    <h3 id="modal-term"></h3>
    <p id="modal-def"></p>
    <div class="close-btn" id="closeBtn">关闭</div>
  </div>
</div>

<script>
  const terms = document.querySelectorAll('.term');
  const modal = document.getElementById('modal');
  const modalTerm = document.getElementById('modal-term');
  const modalDef = document.getElementById('modal-def');
  const closeBtn = document.getElementById('closeBtn');

  // 点击术语显示弹窗
  terms.forEach(t => {
    t.addEventListener('click', () => {
      modalTerm.textContent = t.dataset.term;
      modalDef.textContent = t.dataset.def;
      modal.style.display = 'flex';
    });
  });

  // 关闭按钮
  closeBtn.addEventListener('click', () => modal.style.display = 'none');

  // 点击弹窗外关闭
  modal.addEventListener('click', (e) => {
    if(e.target === modal) modal.style.display = 'none';
  });
</script>

</body>
</html>